<template>
    <div class="outer" :style="{ borderColor: border ? '#A3A3A3' : '#fff' }">
        <div class="user">
            <img :src="list.avatar" alt="">
            <span :style="{ color: videoType ? '#fff' : '' }">{{ list.user_nickname }}</span>
            <span :style="{ color: videoType ? '#fff' : '' }">{{ list.time }}</span>
        </div>
        <div class="text">
            <div :class="{ line2: !show }" :style="{ color: videoType ? '#fff' : '' }" ref="textContainer">
                <span>{{ list.content }}</span>
                <span :style="{ color: videoType ? '#fff' : '', background: videoType ? '#000' : '' }"
                    v-if="!show && line > 1 && list.content.length > 45" class="indent-part">
                    ...
                    (<span @click="open" style="color: #CC0000">展开</span>)
                </span>
            </div>
        </div>
        <div class="cz" v-if="set">

            <div @click="getComment">
                <i class="iconfont">&#xe99a;</i>
                <span>{{ list.coms }}</span>
            </div>

            <div @click="shareCom(list.id)">
                <i class="iconfont">&#xe633;</i>
                <span>{{ list.shares }}</span>
            </div>

            <div @click="likeCom(list.id)">
                <i class="iconfont" :style="{ color: list.is_like == 1 ? 'red' : '' }">&#xe640;</i>
                <span>{{ list.likes }}</span>
            </div>

            <div @click="dislikeCom(list.id)">
                <i class="iconfont" :style="{ color: list.is_dislike == 1 ? 'red' : '' }">&#xe607;</i>
                <span>{{ list.dislikes }}</span>
            </div>

            <div @click="getReport">
                <i class="iconfont">&#xe888;</i>
            </div>

        </div>

        <div v-if="list.coms > 0">
            <div class="outer2" :style="{ borderColor: border ? '#A3A3A3' : '#fff' }"   v-for="item in list.rep_list" :key="item.id" >
            <div class="user">
                <img :src="item.avatar" alt="">
                <span :style="{ color: videoType ? '#fff' : '' }">{{ item.user_nickname }}</span>
                <span :style="{ color: videoType ? '#fff' : '' }">{{ item.time }}</span>
            </div>
            <div class="text">
                <div :class="{ line2: !show }" :style="{ color: videoType ? '#fff' : '' }" ref="textContainer">
                    <span>{{ item.content }}</span>
                    <span :style="{ color: videoType ? '#fff' : '', background: videoType ? '#000' : '' }"
                        v-if="!show && line > 1 && item.content.length > 45" class="indent-part">
                        ...
                        (<span @click="open" style="color: #CC0000">展开</span>)
                    </span>
                </div>
            </div>
            <div class="cz" v-if="set">

                <div @click="getComment">
                    <i class="iconfont">&#xe99a;</i>
                    <!-- <span>{{ item.coms }}</span> -->
                </div>

                <div @click="shareCom1(item.id)">
                    <i class="iconfont">&#xe633;</i>
                    <span>{{ item.shares }}</span>
                </div>

                <div @click="likeCom1(item.id)">
                    <i class="iconfont" :style="{ color: item.is_like == 1 ? 'red' : '' }">&#xe640;</i>
                    <span>{{ item.likes }}</span>
                </div>

                <div @click="dislikeCom1(item.id)">
                    <i class="iconfont" :style="{ color: item.is_dislike == 1 ? 'red' : '' }">&#xe607;</i>
                    <span>{{ item.dislikes }}</span>
                </div>

                <div @click="getReport">
                    <i class="iconfont">&#xe888;</i>
                </div>

            </div>
        </div>
        </div>


    </div>
</template>
<script>
import img from "@/assets/img/t1.png"

export default {
    name: "l-commnet",
    data() {
        return {
            list2: [],
            show: false,
            line: 0
        };
    },
    watch: {
        'list.content'() {
            this.$nextTick(() => {
                console.log(222);
                this.calculateLines();
            });
        },
    },
    props: {
        list: {
            type: Object,
            default: () => {
                return {}
            },
        },
        border: {
            type: Boolean,
            default: true
        },
        set: {
            type: Boolean,
            default: true
        },
        videoType: {
            type: Boolean,
            default: false,
        },
    },
    mounted() {
        this.calculateLines();
    },
    methods: {

        // 评论分享
        shareCom(id) {
            console.log(id,'分享了')
            let params = {
                id,
                op: 3
            }
            this.$api.addShare(params).then(res => {
                if (res.data.code == 1) {
                    this.getList(id, 1, 3)
                }
            })
        },

        shareCom1(id) {
            let params = {
                id,
                op: 3
            }
            this.$api.addShare(params).then(res => {
                if (res.data.code == 1) {
                    this.getList1(id, 1, 3)
                }
            })
        },




        // 点赞评论
        likeCom(id) {
            let params = {
                id
            }
            this.$api.likeCom(params).then(res => {
                if (res.data.code == 1) {
                    let status = res.data.data
                    this.getList(id, status, 1)
                }
            })
        },

                // 点赞评论
                likeCom1(id) {
            let params = {
                id
            }
            this.$api.likeCom(params).then(res => {
                if (res.data.code == 1) {
                    let status = res.data.data
                    this.getList1(id, status, 1)
                }
            })
        },





        // 踩评
        dislikeCom(id) {
            let params = {
                id
            }
            this.$api.dislikeCom(params).then(res => {
                if (res.data.code == 1) {
                    let status = res.data.data
                    this.getList(id, status, 2)
                }
            })
        },


        
        // 踩评
        dislikeCom1(id) {
            let params = {
                id
            }
            this.$api.dislikeCom(params).then(res => {
                if (res.data.code == 1) {
                    let status = res.data.data
                    this.getList1(id, status, 2)
                }
            })
        },



        getReport() {
            this.$emit('goReport', this.list)
        },

        getList(id, status, op) {
            this.$emit('reList', {
                id, status, op
            })
        },

        getList1(id, status, op) {
            this.$emit('reList1', {
                id, status, op
            })
        },

        calculateLines() {

            const element = this.$refs.textContainer;
            const lineHeight = parseInt(window.getComputedStyle(element).lineHeight, 10);
            const height = element.clientHeight;
            const lines = Math.round(height / lineHeight);
            this.line = lines
        },
        // 展开
        open() {
            this.show = true
            this.$emit('goOpen', this.list.id)
        },
        getComment() {
            console.log('click');
            //给父页面传id，父页面需要再自己写 @goComm="goComm"
            this.$emit('goComm', this.list)
        },
        getComment2() {
            console.log('click');
            this.$emit('goComm', this.list.id)
        }
    },
}
</script>
<style lang="scss" scoped>
.outer {
    padding: 20px 0 30px;
    border-bottom: 1px solid #fff;
    width: 100%;
}

.user {
    display: flex;
    align-items: center;

    img {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        margin-right: 12px;
    }

    >span {
        font-weight: 400;
        font-size: 14px;
        color: #000000;

        &:nth-child(2) {
            font-weight: 400;
            font-size: 16px;
            color: #000000;
            margin-right: 5px;
        }
    }
}

.text {
    margin-top: 20px;
    display: flex;
    position: relative;
    font-weight: 400;
    font-size: 18px;
    color: #000000;
    line-height: 1.5;

    .indent-part {
        cursor: pointer;
        padding: 0 10px 0 6px;
        position: absolute;
        bottom: 0;
        right: 0;
        background-color: #fff;
        ;
    }
}

.cz {
    display: flex;
    margin-top: 18px;

    >div {
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 400;
        font-size: 14px;
        color: #666666;
        margin-right: 30px;

        i {
            font-size: 16px;
            margin-right: 5px;
        }
    }
}





.outer2 {
    padding: 20px 0 30px;
    width: 100%;
    margin-left: 40px;
    margin-top: 10px;
}

.user {
    display: flex;
    align-items: center;

    img {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        margin-right: 12px;
    }

    >span {
        font-weight: 400;
        font-size: 14px;
        color: #000000;

        &:nth-child(2) {
            font-weight: 400;
            font-size: 16px;
            color: #000000;
            margin-right: 5px;
        }
    }
}

.text {
    margin-top: 20px;
    display: flex;
    position: relative;
    font-weight: 400;
    font-size: 18px;
    color: #000000;
    line-height: 1.5;

    .indent-part {
        cursor: pointer;
        padding: 0 10px 0 6px;
        position: absolute;
        bottom: 0;
        right: 0;
        background-color: #fff;
        ;
    }
}

.cz {
    display: flex;
    margin-top: 18px;

    >div {
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 400;
        font-size: 14px;
        color: #666666;
        margin-right: 30px;

        i {
            font-size: 16px;
            margin-right: 5px;
        }
    }
}







.line2 {
    width: 100%;
    /* 设置一个固定宽度，以便文字换行 */
    line-height: 1.5;
    /* 设置行高 */
}
@media screen and (max-width:768px) {
    .outerCom {
        padding: 10px;
        margin: 0 10px;
    }

    .user {
        flex-wrap: wrap;

        img {
            width: 40px;
            height: 40px;
            margin-right: 10px;
        }

        .forCol {
            font-size: 13px;
            display: block;
            margin: 0;
            flex: 1;
        }

        >span {
            font-size: 12px;

            &:nth-child(2) {
                width: calc(100% - 50px);
                font-size: 12px;
                margin-right: 0;
            }

            &:nth-child(3) {
                margin-left: 50px;
                display: block;
                font-size: 12px;
                margin-right: 10px;
            }
        }
    }

    .text {
        margin-left: 50px;
        margin-top: 15px;
        font-size: 14px;
    }

    .check {
        justify-content: flex-end;

        button {
            margin: 10px 0;
            width: 60px;
            height: 30px;
            font-size: 13px;
            line-height: 30px;
            padding: 0;
        }
    }
    .cz{
        margin-left: 50px;
        >div{
            font-size: 12px;
            margin-right: 25px;
            i{
                font-size: 12px;
                margin-right: 5px;
            }
        }
    }
}
</style>